<style  scoped>
.icon-delete {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  color: red;
}
.radio-type {
  position: absolute;
  right: 50px;
  top: 0px;
}
.demo-split {
  height: 650px;
  border: 1px solid #dcdee2;
}
.left-pane .split-pane-left {
  padding: 10px;
  background: #fff;
}
.tdEpi .ivu-table-cell {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
</style>

<template>
  <div>
    <Card class="margin-bottom-10">
      <Row ref="card" :gutter="16">
        <Col span="3">
          <Select size="large" v-model="wordType" @on-change="treeChange">
            <Option :value="-1">全部类别</Option>
            <Option :value="0">能力评估</Option>
            <Option :value="1">等级评定</Option>
            <Option :value="2">社会救助</Option>
            <Option :value="3">养老政策</Option>
            <Option :value="4">低保核查</Option>
            <Option :value="9">其他</Option>
          </Select>
        </Col>
        <Col span="4">
          <Input size="large" v-model="str" placeholder="名称/关键字" />
        </Col>
        <Col span="13">
          <Button size="large" type="primary" icon="ios-search" v-on:click="pPage=1;SearchWord()">查询</Button>
        </Col>
        <Col span="4" style="text-align:right">
          <Button
            size="large"
            type="primary"
            icon="ios-add"
            @click="clearWord();modalWord=true;"
          >添加文档</Button>
        </Col>
      </Row>
    </Card>
    <Modal :mask-closable="false" v-model="modalWord" width="500" >
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>添加文档</span>
      </p>
      <Form :model="wordTemp" ref="formItem" :label-width="80" :rules="ruleValidate">
        <FormItem label="文件类别" prop="WordType">
          <Select v-model="wordTemp.WordType">
            <Option :value="0">能力评估</Option>
            <Option :value="1">等级评定</Option>
            <Option :value="2">社会救助</Option>
            <Option :value="3">养老政策</Option>
            <Option :value="4">低保核查</Option>
            <Option :value="9">其他</Option>
          </Select>
        </FormItem>
        <FormItem label="关键字" prop="SearchKey">
          <Input v-model="wordTemp.SearchKey" placeholder="查询关键字" />
        </FormItem>
        <FormItem label=" ">
          <Upload
            ref="upload"
            :format="['jpg','jpeg','png','doc','docx','xlsx','xls','ppt','pptx','pdf']"
            :on-format-error="handleFormatError"
            :on-success="handleSuccess"
            :on-progress="handleProgress"
            :before-upload="handleBefore"
            :on-error="handleError"
            :action="uploadurl"
            :headers="uploadheader"
            :on-remove="clearWordFile"
            data="words"
            style="display: inline-block;"
          >
            <Button
              type="primary"
              :loading="uploading"
              size="large"
              icon="ios-cloud-upload-outline"
            >上传文件</Button>
          </Upload>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button :loading="loading2" type="primary" size="large" @click="SaveWord()">保存</Button>
      </div>
    </Modal>
    <Table
      :loading="loading"
      :columns="tableTitle"
      :data="tableData"
      ref="table"
      :height="tableHeight"
    ></Table>

    <Row class="margin-top-10">
      <Page
        :total="total"
        :current="pPage"
        :page-size="pSize"
        :page-size-opts="[50,100,300,500,1000,2000,5000]"
        @on-change="s=>{pPage=s;SearchWord();}"
        @on-page-size-change="p=>{pSize=p;pPage=1;SearchWord()}"
        show-total
        show-sizer
      />
    </Row>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { Message, Modal } from "view-design";
import Refresh from "@/components/refresh";
import { hasOneOf } from "@/libs/tools";
import { SearchWord, DeleteWord, AddWord } from "@/api/work";
import { getToken, baseUrl } from "@/libs/util";
export default {
  name: "word_manager",
  data() {
    return {
      split1: 0.1,
      imgtype: "0",
      modalWord: false,
      loading: false,
      loading2: false,
      tableHeight: 450,
      uploading: false,

      wordType: -1,
      dataMenu: [],
      tableTitle: [],
      tableData: [],
      total: 0,
      pPage: 1,
      pSize: 50,
      str: "",
      areaid: "",
      AreaList: [],
      wordTemp: {
        Name: "",
        ExtName: "",
        WordUrl: "",
        WordSource: null,
        WordType: null,
        WordTime: dayjs().format("YYYY-MM-DD")
      },
      uploadheader: {
        Authorization: "Bearer " + getToken()
      },
      uploadurl:  "api/Data/UploadFile",
      ruleValidate: {
        SearchKey: [
          {
            required: true,
            message: "不能为空"
          }
        ],
        WordType: [
          {
            type: "number",
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  components: {
    Refresh
  },
  computed: {},
  methods: {
    dayjs,
    treeChange() {
      this.page = 1;
      this.SearchWord();
    },
    SearchWord() {
      let vm = this;
      vm.loading = true;
      var reqData = {
        str: vm.str,

        wordtype: this.wordType,
        page: vm.pPage,
        size: vm.pSize
      };
      SearchWord(reqData).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          Message.error(data.Message);
        }
        vm.loading = false;
      });
    },
    clearWord() {
      this.wordTemp = {
        Name: "",
        ExtName: "",
        WordUrl: "",
        SearchKey: "",
        WordType: null
      };
    },
    clearWordFile() {
      this.wordTemp.Name = data.name;
      this.wordTemp.ExtName = data.extname;
      this.wordTemp.WordUrl = data.Url;
    },
    DeleteWord(id) {
      Modal.confirm({
        title: "提示",
        content: "确定要删除此文档吗？",
        onOk: () => {
          DeleteWord(id).then(res => {
            const data = res.data;
            if (data.Type == 1) {
              this.SearchWord();
              this.$Message.success({ title: "提示", content: "删除成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {}
      });
    },
    SaveWord() {
      let vm = this;
      this.$refs["formItem"].validate(valid => {
        if (valid) {
          if (
            !vm.wordTemp.Name ||
            !vm.wordTemp.ExtName ||
            !vm.wordTemp.WordUrl
          ) {
            Message.error("请先上传文件");
          } else {
            vm.loading2 = true;
            AddWord(vm.wordTemp).then(res => {
              const data = res.data;
              if (data.Type == 1) {
                vm.modalWord = false;
                this.SearchWord();
                this.$Message.success({ title: "提示", content: "保存成功" });
              } else {
                this.$Modal.error({ title: "提示", content: data.Message });
              }
              vm.loading2 = false;
            });
          }
        }
      });
    },
    // 下载方法
    getFileAndDownload(fileName, url) {
      var x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = "blob";
      x.onload = function(e) {
        var blob = x.response;
        if ("msSaveOrOpenBlob" in navigator) {
          //IE导出
          window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
          var a = document.createElement("a");
          a.download = fileName;
          a.href = URL.createObjectURL(blob);
          a.click();
        }
      };
      x.send();
    },
    handleProgress() {
      this.uploading = true;
    },
    handleBefore() {
      this.$refs.upload.clearFiles();
    },
    handleFormatError(file) {
      this.uploading = false;
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: "仅支持word、pdf、图片格式"
      });
    },
    handleError() {
      this.$Modal.error({ title: "提示", content: "上传失败" });
      this.uploading = false;
    },
    handleSuccess(res, file) {
      let vm = this;
      if (res.Type == 1) {
        var data = res.Data;
        vm.wordTemp.Name = data.name;
        vm.wordTemp.ExtName = data.extname;
        vm.wordTemp.WordUrl = data.Url;
      } else {
        this.$Notice.error({
          title: "上传失败",
          desc: res.Message
        });
      }
      this.uploading = false;
    }
  },
  created() {},
  mounted() {
    let vm = this;
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 260;

    this.tableTitle = [
      { title: "序号", key: "R_INDEX", width: 80, align: "center" },
      {
        title: "文件名称",
        key: "Name",
        align: "center",
        minWidth: 300,
        render: (h, params) => {
          return h("div", [
            h(
              "a",
              {
                style: {
                  fontSize: "16px",
                  textAlign: "left",
                  color: "#515a6e",
                  float: "left"
                },
                on: {
                  click: () => {
                    this.$router.push({
                      name: "word_detail",
                      params: {
                        id: params.row.WordUrl,
                        name: params.row.Name,
                        extname: params.row.ExtName
                      }
                    });
                  }
                }
              },
              params.row.Name
            )
          ]);
        }
      },

      {
        title: "文件类别",
        key: "WordType",
        width: 150,
        align: "center",
        render: (h, params) => {
          if (params.row.WordType == 0) {
            return h("span", {}, "能力评估");
          } else if (params.row.WordType == 1) {
            return h("span", {}, "等级评定");
          } else if (params.row.WordType == 2) {
            return h("span", {}, "社会救助");
          } else if (params.row.WordType == 3) {
            return h("span", {}, "养老政策");
          } else if (params.row.WordType == 9) {
            return h("span", {}, "其他");
          }
        }
      },
      {
        title: "操作",
        key: "action",
        width: 200,
        align: "center",
        render: (h, params) => {
          return h("div", [
            h(
              "Button",
              {
                props: {
                  type: "success",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.$router.push({
                      name: "word_detail",
                      params: {
                        id: params.row.WordUrl,
                        name: params.row.Name,
                        extname: params.row.ExtName
                      }
                    });
                  }
                }
              },
              "查看"
            ),
            h(
              "Button",
              {
                props: {
                  type: "warning",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    this.getFileAndDownload(
                      params.row.Name,
                      params.row.WordUrl
                    );
                  }
                }
              },
              "下载"
            ),
            h(
              "Button",
              {
                props: {
                  type: "error",
                  size: "small"
                },
                on: {
                  click: () => {
                    this.DeleteWord(params.row.Gid);
                  }
                }
              },
              "删除"
            )
          ]);
        }
      }
    ];

    this.SearchWord();
  }
};
</script>
